import {messages} from "share/common";
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import 'styles/unbox-setting/common-status.scss';
import finishImg from 'images/home/unbox-setting/finish.png';
import finishEnImg from 'images/home/unbox-setting/finish-en.jpg';
import {connect} from 'react-redux';

function mapStateToProps(state) {
  return {
    language: state.main.language,
    settingStatus: state.login.settingStatus
  }
}

@connect(mapStateToProps)

class CommonStatus extends Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  componentWillMount() {

  }

  componentDidMount() {

  }

  componentWillUnmount() {

  }

  clicked = (e, key) => {
    e.preventDefault();
    e.stopPropagation();
    this.props.goToUnboxSetting && this.props.goToUnboxSetting(key);
  }

  render() {
    const { firstMode, settingStatus, noStep } = this.props;

    let BASIC = settingStatus.filter(item=>item.moduleType === 'BASIC')[0];
    let RECOMMEND = settingStatus.filter(item=>item.moduleType === 'RECOMMEND')[0];

    const { code } = this.props.language;
    let isZhCn = code === 'zh_cn';

    let menuList = [
      {
        title: messages('basic-1.key155')/*基础设置*/,
        key: 'Basic',
        desc: messages('basic-1.key156')/*该模块为必填设置，请尽快完成设置*/,
        all: BASIC.all,
        activate: BASIC.activate
      },
      {
        title: messages('basic-1.key157')/*推荐设置*/,
        key: 'Recommend',
        desc: messages('basic-1.key158')/*可以更好地帮助您的企业管控费用*/,
        all: RECOMMEND.all,
        activate: RECOMMEND.activate
      },
      {
        title: messages('basic-1.key159')/*高级功能*/,
        key: 'Advance',
        desc: messages('basic-1.key160')/*全面提升员工报销体验与运营管理效率*/
      }
    ]

    return (
      <div className={`common-status ${['zh_cn', 'zh_tw'].indexOf(code) !== -1 ? '' : 'en'}`}>
        {!firstMode &&
        menuList.map((item)=>{
          return (
            <div
              className={`single-box ${(item.all === item.activate && item.key !== 'Advance') ? 'active' : ''}`}
              onClick={(e)=>{this.clicked(e, item.key)}} key={item.key}
            >
              <div className="title-step">
                {item.key !== 'Advance' && (item.activate !== item.all) && !noStep &&
                  <span className={`box-steps ${item.activate !== 0 ? 'blue-style' : ''}`}>
                    {`${item.activate} / ${item.all}`}
                  </span>
                }
                <span className="box-title">{item.title}</span>
              </div>
              <div className="box-text">{item.desc}</div>
              {(item.all === item.activate) && (item.key !== 'Advance') &&
                <img src={isZhCn ? finishImg : finishEnImg} className='finish-img'/>
              }
            </div>
          )
        })
        }
        {firstMode &&
          <div className="twin-box" onClick={(e)=>{this.clicked(e, null)}}>
            <div className="box-tag">{messages('basic-1.key82')/*快捷设置*/}</div>
            <div className="child-box">
              <div className="box-title">{messages('basic-1.key155')/*基础设置*/}</div>
              <div className="box-text">{messages('basic-1.key156')/*该模块为必填设置，请尽快完成设置*/}</div>
            </div>
            <div className="child-box">
              <div className="box-title">{messages('basic-1.key157')/*推荐设置*/}</div>
              <div className="box-text">{messages('basic-1.key158')/*可以更好地帮助您的企业管控费用*/}</div>
            </div>
          </div>
        }
        {firstMode &&
          <div className="recommend-box" onClick={(e)=>{this.clicked(e, 'Advance')}}>
            <div className="box-tag">{messages('basic-1.key161')/*功能推荐*/}</div>
            <div className="box-title">{messages('basic-1.key159')/*高级功能*/}</div>
            <div className="box-text">{messages('basic-1.key160')/*全面提升员工报销体验与运营管理效率*/}</div>
          </div>
        }
      </div>
    );
  }
}

CommonStatus.propTypes = {};

export default CommonStatus;
